HTML DOM Node firstChild Property

# HTML DOM firstChild Property

Element Object

## Example

Get the HTML content of the first child node of an <ul> element:

var x = document.getElementById("myList").firstChild.innerHTML;

The result of x will be:

Coffee
Try it yourself »

More "Try it Yourself" examples below.

## Definition and Usage

The firstChild property returns the first child node of the specified node, as a Node object.

The difference between this property and firstElementChild, is that firstChild returns the first child node as an element node, a text node or a comment node (depending on which one's first), while firstElementChild returns the first child node as an element node (ignores text and comment nodes).

Note: Whitespace inside elements is considered as text, and text is considered as nodes (See "More Examples").

This property is read-only.

Tip: Use the element.childNodes property to return any child node of a specified node. childNodes[0] will produce the same result as firstChild.

Tip: To return the last child node of a specified node, use the lastChild property.

## Browser Support

Property |  |  |  |  |
--- | --- | --- | --- | --- | ---
firstChild | Yes | Yes | Yes | Yes | Yes

## Syntax

node.firstChild

## Technical Details

Return Value: | A Node object, representing the first child of a node, or null if there are no child nodes
DOM Version | Core Level 1 Node Object

## More Examples

## Example

In this example, we demonstrate how whitespace may interfare with this property.

Get the node name of the first child node of a <div> element:

<!--
Whitespace inside elements is considered as text, and text is considered as nodes
In this example, there is whitespace before <p>, before <span> and after <span>
Therefore, the first child node of <div> is a #text node, and not the <p> element you expected
-->
<div id="myDIV">
<p>Looks like first child</p>
<span>Looks like last Child</span>
</div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>

The result of x will be:

#text
Try it yourself »

## Example

However, if we remove the whitespace from the source, there are no #text nodes in <div>, which will make the <p> element the first child node:

<div id="myDIV"><p>First child</p><span>Last Child</span></div>
<script>
var x = document.getElementById("myDIV").firstChild.nodeName;
document.getElementById("demo").innerHTML = x;
</script>

The result of x will be:

P
Try it yourself »

## Example

Get the text of the first child node of a <select> element:

var x = document.getElementById("mySelect").firstChild.text;

The result of x will be:

Audi
Try it yourself »

## Related Pages

HTML DOM reference: node.lastChild Property

HTML DOM reference: node.childNodes Property

HTML DOM reference: node.parentNode Property

HTML DOM reference: node.nextSibling Property

HTML DOM reference: node.previousSibling Property

HTML DOM reference: node.nodeName Property

Element Object

### WEB HOSTING

UK Reseller Hosting

### WEB BUILDING

FREE Website BUILDER Free HTML5 Templates

### W3SCHOOLS EXAMS

HTML, CSS, JavaScript, PHP, jQuery, XML, and ASP Certifications

### SHARE THIS PAGE

### Color Picker

### HTML/CSS

HTML Tutorial HTML5 Tutorial CSS Tutorial CSS3 Tutorial Bootstrap Tutorial

### JavaScript

JavaScript Tutorial jQuery Tutorial jQuery Mobile Tutorial AngularJS Tutorial AJAX Tutorial JSON Tutorial

### Graphics

Canvas Tutorial SVG Tutorial Google Maps Tutorial

### Server Side

SQL Tutorial PHP Tutorial ASP Tutorial ASP.NET Tutorial VBScript Tutorial AppML Tutorial

### Web

Web Building Web Statistics Web Certification

### XML

XML Tutorial DTD Tutorial Schema Tutorial XML DOM Tutorial XPath Tutorial XSLT Tutorial XQuery Tutorial XSL-FO Tutorial RSS Tutorial WSDL Tutorial

### HTML/CSS

HTML Tag Reference HTML Event Reference HTML Color Reference CSS 1,2,3 Reference Bootstrap Reference

### JavaScript

JavaScript Reference HTML DOM Reference jQuery Reference jQuery Mobile Reference Google Maps Reference

### Server Side

PHP Reference SQL Reference ASP Reference VBScript Reference Razor Reference ASP.NET Reference

### XML

XML DOM Reference XSLT Reference XSL-FO Reference XPath Reference XQuery Reference Schema Reference RSS Reference SVG Reference

### HTML Charsets

HTML Character Sets HTML ASCII HTML ANSI HTML Windows-1252 HTML ISO-8859-1 HTML Symbols HTML UTF-8

### HTML/CSS

HTML Examples CSS Examples

### Browser Scripting

JavaScript Examples HTML DOM Examples jQuery Examples jQuery Mobile Examples AngularJS Examples AJAX Examples

### Server Scripting

PHP Examples ASP Examples VBScript Examples Razor Examples .NET Examples

### XML Languages

XML Examples DTD Examples XML DOM Examples XSL Examples XSLT Examples XPath Examples XQuery Examples Schema Examples RSS Examples SVG Examples